<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>视频教学</van-swipe-item>
      <van-swipe-item>在线做题</van-swipe-item>
      <van-swipe-item>题目分析</van-swipe-item>
    </van-swipe>
    <van-cell center title="心动模式">
      <template #right-icon>
        <van-switch v-model="isMatchMode"></van-switch>
      </template>
    </van-cell>
    <van-cell title="已经加入的小朋友"/>
    <!--  <van-button type="primary" @click="doMatch">-->
    <user-card-list :user-list="userList" :loading="loading" :isShowButton="isShowButton"/>
    <van-empty v-if="!userList || userList.length<1" description="数据为空"/>
  </div>
</template>

<script setup lang="ts">
import UserCardList from "../components/UserCardList.vue"
import myAxios from "../request/myAxios";
import {ref, watchEffect} from "vue";
import {useRoute} from "vue-router";
import {Toast} from "vant";
const route = useRoute();
const isMatchMode = ref<boolean>(false)
const loading = ref<boolean>(true)
const userList = ref([]);
const isShowButton = ref(false);
const loadData = async() => {
  let userListData = [];
  //心动模式，根据标签匹配用户
  if (isMatchMode.value) {
    isShowButton.value = true
    loading.value = true
    const num = 3;
    userListData = await myAxios.get('/user/match', {
      params: {
        num,
        pageSize: 1,
      },
    }).then(res => {
      console.log('/user/match success', res);
      // Toast.success('请求成功');
      return res.data?.data;
    }).catch((error) => {
      console.error('/user/match fail', error);
      Toast.fail('请求失败');
    });
    console.log(userListData);
  } else {
    //普通模式，直接分页查询用户
    isShowButton.value = false
    userListData = await myAxios.get('/user/recommend',{
      params:{
        pageNum:1,
        pageSize:8,
      },
    }).then(res =>{
      console.log('/user/recommend success',res);
      return res.data?.data?.records;
    }).catch((error)=>{
      console.error('/user/recommend fail',error);
      Toast.fail('请求失败');
    })
  }
  if (userListData) {
    userListData.forEach(user => {
      if (user.isFollowed == true){
        user.followStatus = '关注';
      }
      if (user.isFollowed == false){
        user.followStatus = '已关注';
      }
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
    loading.value = false;
  }
}
// const loadFollowStatus = async ()=>{
//   userList.value.forEach(user=>{
//     followStatus.value = await myAxios.get('/follow/or/not/'+user.id).then(res=>{
//       return res.data?.data
//     })
//   })
// }
watchEffect(()=>{
  loadData();
})
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
